<!DOCTYPE html>
<html>
<head>
    {include file="layout:_meta" /}
    <style type="text/css">
        .layui-layedit-iframe{
            background: white;
            height: 450px;
        }
        .layui-layedit{
            background: white;
        }
    </style>
</head>
<body>

<div class="layui-form" lay-filter="layuiadmin-form-admin" id="layuiadmin-form-admin" style="padding:10px 30px;">
    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title">
            <li class="layui-this">基本信息</li>
            <li>商品相册</li>
            <li>商品详情</li>
            <li>商品规格</li>
        </ul>
        <div class="layui-tab-content" style="background: whitesmoke;">
            <!--基本信息-->
            <div class="layui-tab-item layui-show">

                <div class="layui-form-item">
                    <label class="layui-form-label">上一级</label>
                    <div class="layui-input-block">
                        <select name="cate_id"  lay-verify="required" lay-search>
                            <option value="">--请选择上一级--</option>
                            {volist name="cate" id="v"}
                            {if condition="isset($list.cate_id)&&$v.id eq $list.cate_id "}
                            <option value="{$v.id}" selected>{$v.levelName}</option>
                            {else /}
                            <option value="{$v.id}">{$v.levelName} </option>
                            {/if}
                            {/volist}
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">商品名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name"  placeholder="请输入商品名称" lay-verify="required"  value="{:isset($list.name)?$list.name:''}" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">商品编号</label>
                    <div class="layui-input-block">
                        <input type="text" name="sn"  placeholder="请输入商品编号" lay-verify="required"  value="{:isset($list.sn)?$list.sn:''}" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <!--图片上传-->
                <div class="layui-form-item">
                    <label class="layui-form-label">缩略图</label>
                    <div class="layui-input-inline uploadHeadImage">
                        <div class="layui-upload-drag" id="headImg">
                            <i class="layui-icon"></i>
                            <p>点击上传图片，或将图片拖拽到此处</p>
                        </div>
                    </div>
                    <div class="layui-input-inline">
                        <div class="layer-photos-demo layui-upload-list"style="text-align: center;margin: 0px !important;"  id="layer-photos-demo">

                            <img  src="{:isset($list.thumb)?$list.thumb:''}" lass="layui-upload-img headImage" height="155px" onclick="showBigImage(this)" id="demo1" >
                            <input type="hidden" id="ad_img" name="thumb" value="{:isset($list.thumb)?$list.thumb:''}">
                            <p id="demoText">缩略图  不大于 120kb </p>
                        </div>
                    </div>
                </div>
                <!--图片上传 end-->
                <div class="layui-form-item">
                    <label class="layui-form-label">商品描述</label>
                    <div class="layui-input-block">
                        <textarea name="description" lay-verify="" placeholder="请输入描述" autocomplete="off" class="layui-textarea">{:isset($list.description)?$list.description:''}</textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">销量</label>
                    <div class="layui-input-block">
                        <input type="number" name="sell_num" lay-verify="" placeholder="请输入商品销量" lay-reqtext=""  autocomplete="off" value="{:isset($list.sell_num)?$list.sell_num:''}" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">序号</label>
                    <div class="layui-input-block">
                        <input type="number" name="sort" lay-verify="" placeholder="请输入序号 数字越小排序越靠前" lay-reqtext=""  autocomplete="off" value="{:isset($list.sort)?$list.sort:''}" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">是否推荐</label>
                    <div class="layui-input-block">
                        {if condition="isset($list.is_recommend)&&$list.is_recommend==1"}
                        <input type="checkbox" lay-filter="is_recommend"  checked value="1" name="state" lay-skin="switch" lay-text="推荐|不推荐">
                        {else /}
                        <input type="checkbox" lay-filter="is_recommend"  value="0" name="state" lay-skin="switch" lay-text="推荐|不推荐">
                        {/if}
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-block">
                        {if condition="isset($list.state)&&$list.state==1"}
                        <input type="checkbox" lay-filter="state"  checked value="1" name="state" lay-skin="switch" lay-text="上架|下架">
                        {else /}
                        <input type="checkbox" lay-filter="state"  value="0" name="state" lay-skin="switch" lay-text="上架|下架" >
                        {/if}
                    </div>
                </div>

            </div>
            <!--商品相册-->
            <div class="layui-tab-item">
                <div class="layui-form-item">
                    <label class="layui-form-label">多图列表：</label>
                    <div class="layui-upload layui-input-block">
                        <button type="button" class="layui-btn" id="btn_multiple_upload_img">多图上传</button>
                        <button type="button" class="layui-btn" id="btn_image_clear">清空多图</button>
                        <span style="border: 0px;color: red" >单张图片删除：双击图片可删除</span>
                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                            <div class="layui-upload-list" id="upload_image_list"></div>
                            <input type="hidden" name="images" class="upload_image_url" value="">
                        </blockquote>
                    </div>
                </div>
            </div>
            <!--商品详情-->
            <div class="layui-tab-item">
                <div class="layui-form-item">
                    <textarea name="content" id="laydeit" placeholder="请输入描述" autocomplete="off" class="layui-textarea" lay-verify="content" style="display: none;">{:isset($list.content)?$list.content:''}</textarea>
                </div>
            </div>
            <!--商品规格-->
            <div class="layui-tab-item">
                <div id="selected" class="layui-form-item">
                    <label class="layui-form-label">规格类型</label>
                    <div class="layui-input-inline">
                        <select lay-filter="attr_id" name="attr_id"  id="attr_ids" lay-search>
                            <option value="0">--规格类型--</option>
                            {volist name="attr_cate" id="v"}
                            {if condition="isset($list.attr_id)&&$v.id eq $list.attr_id "}
                            <option value="{$v.id}" selected>{$v.name}</option>
                            {else /}
                            <option value="{$v.id}">{$v.name} </option>
                            {/if}
                            {/volist}
                        </select>

                    </div>
                    <div class="layui-form-mid layui-word-aux">类型说明：选择商品的规格类型，编辑商品属性</div>
                </div>
                <!--商品属性  多规格-->
                <div class="layui-form" id="SKU_TYPE"  {if condition="!isset($list['attr_id'])" } style="display: none" {/if}> </div>
                <div id="skuTable"   {if condition="empty($list['attr_id'])" } style="display: none" {/if}></div>
            <div class="layui-form-item">
            <div class="layui-input-block">
                <button id="skuSubmit" type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
            </div>
          </div>
                <!--end-->
             <!--单规格-->
             <div class="layui-form-item" id="one-attr">
            <div class="layui-inline">
                <label class="layui-form-label">原价</label>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="text" name="original_price" placeholder="原价" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid">售价</div>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="text" name="sell_price" placeholder="售价" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid">库存</div>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="text" name="stock" placeholder="库存" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">单规格：未选择商品的规格类型时，为单规格</div>
            </div>

        </div>
        <!--单规格-->
            </div>
            <!--end-->
        </div>
    </div>

    <div class="layui-form-item layui-hide">
        <input type="hidden" name="id" value="{:isset($list['id'])?$list['id']:''}">
        <input type="hidden" name="token" value="{:isset($list['token'])?$list['token']:''}">
        <input type="button" lay-submit lay-filter="addEdit" id="addEdit" value="确认">
    </div>
</div>
{include file="layout:_footer" /}
<script src="__static__/admin/lib/jquery/1.9.1/jquery.js"></script>
<script>
    var attr_arr = '';
    layui.config({
        base: '__static__/admin/' //静态资源所在路径
    }).extend({
        index: 'lib/index', //主入口模块
       laySku: 'laySku' //主入口模块
    }).use(['index', 'form','upload','layedit','laySku'], function(){
        var form = layui.form,$ = layui.$,upload = layui.upload,layedit = layui.layedit,laySku = layui.laySku;

        //拖拽上传 单图上传
        var uploadInst = upload.render({
            elem: '#headImg'
            , url: "/admin/index/upload_img"+'?uptype=goods'
            , size: 120
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {
                console.log(res.code,'==========================>图片上传返回<');
                //如果上传失败
                if (res.code != 0) {
                    return layer.msg('上传失败');
                }
                //上传成功
                //打印后台传回的地址: 把地址放入一个隐藏的input中, 和表单一起提交到后台, 此处略..
                /*   console.log(res.data.src);*/
                //   window.parent.uploadHeadImage(res.files);
                var demoText = $('#demoText');
                // $('#ad_img').val(res.files);
                $('#ad_img').val(res.data.img_url);
                console.log(demoText,'===========>,<!!!');
                demoText.html('<span style="color: #8f8f8f;">上传成功!!!</span>');
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });
        //end
        //编辑器
        layedit.set({
            //暴露layupload参数设置接口 --详细查看layupload参数说明
            uploadImage: {
                url: "/admin/index/upload_img"+'?uptype=goods_edit' ,
                accept: 'image',
                acceptMime: 'image/*',
                exts: 'jpg|png|gif|bmp|jpeg',
                size: '10240'
            }
            , uploadVideo: {
                url: '/Attachment/LayUploadFile',
                accept: 'video',
                acceptMime: 'video/*',
                exts: 'mp4|flv|avi|rm|rmvb',
                size: '20480'
            }
            //右键删除图片/视频时的回调参数，post到后台删除服务器文件等操作，
            //传递参数：
            //图片： imgpath --图片路径
            //视频： filepath --视频路径 imgpath --封面路径
            , calldel: {
                url: '/Attachment/DeleteFile'
            }
            //开发者模式 --默认为false
            , devmode: true
            //插入代码设置
            , codeConfig: {
                hide: true,  //是否显示编码语言选择框
                default: 'javascript' //hide为true时的默认语言格式
            }
            , tool: [
                'html', 'code', 'strong', 'italic', 'underline', 'del', 'addhr', '|', 'fontFomatt', 'colorpicker', 'face'
                , '|', 'left', 'center', 'right', '|', 'link', 'unlink','images', 'image_alt', 'video', 'anchors'
                , '|','table', 'fullScreen'
            ]
            , height: '100%'
            ,background:'white',
        });
        var edit =  layedit.build('laydeit'); //建立编辑器
        form.verify({
            content: function(value) {
                return layedit.sync(edit);
            }
        });
        //end
        //多图上传
        var uploadInsts = upload.render({
            elem: '#btn_multiple_upload_img'
            ,url:"/admin/index/upload_img"+'?uptype=goods_photos'
            ,multiple: true
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#upload_image_list').append('<img style="height: 66px;margin-left: 7px" src="'+ result +'" title="单击删除" onclick="delMultipleImgs(this)" class="layui-upload-img">');
                });
            }
            ,done: function(res){
                //上传完毕
                if (res.code == 0) {
                    var last_url = $(".upload_image_url").val();

                    var upload_image_url = "";
                    if(last_url){
                        upload_image_url = last_url+","+res.data.img_url;
                    }else {
                        upload_image_url = res.data.img_url;
                    }
                    $(".upload_image_url").val(upload_image_url);
                }else {
                 //   dialog.tip(res.message);
                }
            }
        });
        //end
        form.on('select(attr_id)', function(data){
            console.log(data)
            console.log(data.elem); //得到select原始DOM对象
            console.log(data.value); //得到被选中的值
            console.log(data.othis); //得到美化后的DOM对象
            var value = data.value;
            if(value == 0){
                $("#SKU_TYPE").hide();
                $("#skuTable").hide();
                $("#one-attr").show();

            }else{
                console.log(data.value,'=======>被选中1<'); //得到被选中的值1

                getSclass();

                console.log(data.value,'=======>被选中2<'); //得到被选中的值2
                $("#SKU_TYPE").show();
                $("#skuTable").show();
                $("#one-attr").hide();
            }
        });
        //end
        function getSclass() {
            //获取选定的一级分类名称
            var fVal = $("#attr_ids").val();
            if(fVal == ''){
                return false;
            }
            //根据一级分类查二级数据
            var url = "{:url('goods/get_attr')}";
            console.log(fVal,']]]]]]]]]]]]]]]]]]]ssfVal');
            $.ajax({
                //取消异步，也就是必须完成上面才能走下面
             //   async:false,
                url:url,
                data:{val:fVal},
                type:"POST",
                dataType:"JSON",
                success: function(data){
                 console.log(data,'===========================><');
                 if(data.code == 200){
                     attr_arr = data.data;
                     console.log(attr_arr,'========================>attr_arr<');
                     var sku = new laySku({
                         id:'SKU_TYPE',//checkbox选择框
                         container_id:'skuTable',//容器id渲染table
                         data:data.data,//数据类型
                         rowReturn:true,//是否绑定tr单击事件
                         rowMaster:function(res1){//绑定tr单击事件执行的操作
                             console.log(res1);
                         },
                        btn:'skuSubmit',//按钮提交
                         skuSubmitBind:function(res2){//提交之后的某些操作
                             console.log(res2);
                             $('#ad_img').val(res1);
                         },
                         // uploadSrc:'https://httpbin.org/post',//图片上传接口
                         // uploadBefore:function(obj,elem){//上传之前的操作
                         //     obj.preview(function(index, file, result){
                         //         elem.append('<img style="width:38px;height:38px;object-fit:cover;" src="http://xxh2019.oss-cn-beijing.aliyuncs.com/hmyp/JULoX1578887334705.jpg">')
                         //     });
                         // },
                         // uploadDone:function(){//上传图片成功的操作
                         //
                         // },
                         // uploadError:function(){//上传图片失败的操作
                         //
                         // }
                     });
                     sku.init();
                     console.log(attr_arr,'======================56565656');
                 }
                }
            });
        };
        //end

        //sku

        //end

        form.on('switch(state)', function(data){
            this.value = this.checked?1:0;
        });
    });

    /**
     * 多图清除按钮点击事件
     */
    $("#btn_image_clear").click(function () {
        $('#upload_image_list').html("");
        $(".upload_image_url").val('');
    });
    /**
     * 多图上传的单击删除操作
     * @param this_img
     */
    function delMultipleImgs(this_img) {
        //获取下标
        var subscript = $("#upload_image_list img").index(this_img);
        multiple_images = $('.upload_image_url').val().split(",");
        //删除图片
        this_img.remove();
        //删除数组
        multiple_images.splice(subscript, 1);
        $('.upload_image_url').val(multiple_images);
    };

    $("#attr_ids").change(
        function() {
            getSclass();
        }
    );
    //end



</script>
</body>
</html>